<template>
    <el-container>
        <div class="c2">
            <el-row :gutter="20">
                    <div class="c1">
                        <el-button
                                size="mini"
                                type="primary"
                                icon="el-icon-plus"
                                @click="addclass"
                        >新增</el-button
                        >
                        &#12288;
                        <el-button
                                :loading="downloadLoading"
                                size="mini"
                                class="dBtn"
                                type="warning"
                                icon="el-icon-download"
                                @click="download"
                        >导出</el-button
                        >
                        <el-form
                                :inline="true"
                                :model="searchData2"
                                class="demo-form-inline s1"
                        >
                            <el-form-item>
                                <el-input
                                        class="search_inp"
                                        v-model="searchData2.name"
                                        placeholder="输入'班级名'查询"
                                ></el-input>
                            </el-form-item>

                            <el-form-item>
                                <el-button
                                        size="mini"
                                        type="success"
                                        icon="el-icon-search"
                                        @click="searchClassBtn(searchData2)"
                                >查询</el-button
                                >
                            </el-form-item>
                            <el-form-item>
                                <el-button
                                        size="mini"
                                        type="warning"
                                        icon="el-icon-refresh-left"
                                        @click="searchrestBtn(searchData2)"
                                >重置</el-button
                                >
                            </el-form-item>
                        </el-form>
                    </div>

                    <el-table
                            :data="tableData2"
                            style="width: 100%"
                            max-height="450"
                            align="center"
                            stripe
                            v-loading="loading"
                    >
                        <el-table-column type="index" width="80" label="序号">
                        </el-table-column>
                        <el-table-column prop="id" label="ID" width="100" align="center">
                        </el-table-column>
                        <el-table-column prop="name" label="班级名" width="100" align="center">
                        </el-table-column>

                        <el-table-column prop="number" label="班级人数" width="100" align="center">
                        </el-table-column>
                        <!-- <el-table-column prop="password" label="登录密码"> </el-table-column> -->
                        <el-table-column  label="详情"  width="100" align="center">
                            <template v-slot="prop">
                                <el-button size="mini" type="success" icon="el-icon-check" circle @click="classDetail(prop.row.id)"></el-button>
                            </template>
                        </el-table-column>

                        <el-table-column width="200" label="操作" >
                            <template slot-scope="scope">
                                <el-button
                                        size="mini"
                                        type="primary"
                                        icon="el-icon-edit"
                                        @click="handleClassEdit(scope.row)"
                                ></el-button>
                                <el-button
                                        type="danger"
                                        icon="el-icon-delete"
                                        size="mini"
                                        @click="handleDeleteClass(scope.row.id)"
                                ></el-button>
                            </template>
                        </el-table-column>
                    </el-table>

                    <div class="pageCon">
                        <el-pagination
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                                :current-page="this.pageNum.currentPage"
                                :page-sizes="[2, 4, 6,8]"
                                :page-size="this.pageNum.perPage_size"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="this.pageNum.total"
                        >
                        </el-pagination>
                    </div>

            </el-row>
        </div>

        <!-- 新增菜单对话框 start -->

<el-dialog
        title="新增用户"
        :visible.sync="adduserDialogVisible"
        width="50%"
        class="adddialog"
>
    <el-form
            class="editform"
            ref="ruleForm"
            :rules="rules"
            label-position="left"
            label-width="80px"
            :model="addData"
    >
        <!-- <el-form-item label="菜单类型">
          <template>
            <el-radio v-model="addData.type" :label="1">目录</el-radio>
            <el-radio v-model="addData.type" :label="2">菜单</el-radio>
            <el-radio v-model="addData.type" :label="3">按钮</el-radio>
          </template>
        </el-form-item> -->
        <el-form-item label="用户名" prop="userName">
            <el-input v-model="addData.userName" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="登录账号" prop="loginName">
            <el-input v-model="addData.loginName" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="登录密码" prop="password">
            <el-input v-model="addData.password" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
            <el-input v-model="addData.phone" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
            <el-input v-model="addData.email" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="部门" prop="deptList">
            <!-- <Treeselect
              v-model="deptList"
              :options="depts"
              style="width: 178px"
              placeholder="选择部门"
              @select="selectFun"
            /> -->
            <el-select v-model="addData.deptList" multiple placeholder="请选择">
                <el-option
                        v-for="item in depts"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                >
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="角色" prop="roleList">
            <!-- <Treeselect
              v-model="deptList"
              :options="depts"
              style="width: 178px"
              placeholder="选择部门"
              @select="selectFun"
            /> -->
            <el-select v-model="addData.roleList" multiple placeholder="请选择">
                <el-option
                        v-for="item in roles"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                >
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="是否启用">
            <el-switch
                    v-model="addData.status"
                    :active-value="1"
                    :inactive-value="0"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
            >
            </el-switch>
        </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
        <el-button size="mini" type="warning" @click="addNo">取 消</el-button>
        <el-button size="mini" type="primary" @click="adduserDialog"
        >确 定</el-button
        >
      </span>
</el-dialog>
<!-- 新增菜单对话框 end -->

<!-- 删除 -->
<el-dialog title="提示" :visible.sync="deluserDialogVisible" width="30%">
    确认删除吗?
    <span slot="footer" class="dialog-footer">
        <el-button @click="deluserDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="deluserDialog">确 定</el-button>
      </span>
</el-dialog>

        <!-- 删除班级信息-->
        <el-dialog title="提示" :visible.sync="delClassDialogVisible" width="30%">
            确认删除吗?
            <span slot="footer" class="dialog-footer">
        <el-button @click="delClassDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="delClassDialog">确 定</el-button>
      </span>
        </el-dialog>

<!-- 修改 -->
<el-dialog
        title="用户修改"
        :visible.sync="edituserDialogVisible"
        width="50%"
>
    <el-form
            class="editform"
            ref="ruleForm2"
            :rules="rules"
            label-position="left"
            label-width="80px"
            :model="usersForm"
    >
        <el-form-item label="用户名" prop="userName">
            <el-input
                    v-model="usersForm.userName"
                    placeholder="请输入"
            ></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
            <el-input v-model="usersForm.phone" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
            <el-input v-model="usersForm.email" placeholder="请输入"></el-input>
        </el-form-item>

        <el-form-item label="角色" prop="roleIds">
            <el-select multiple v-model="editDate1.roleIds" placeholder="请选择">
                <el-option
                        v-for="item in tableData1"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                >
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="部门" prop="deptList">
            <el-select v-model="editDate1.deptList" multiple placeholder="请选择">
                <el-option
                        v-for="item in depts"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                >
                </el-option>
            </el-select>
        </el-form-item>
    </el-form>

    <span slot="footer" class="dialog-footer">
        <el-button @click="edituserDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="edituserDialog">确 定</el-button>
      </span>
</el-dialog>


        <!-- 班级信息修改 -->
        <el-dialog
                title="班级信息修改"
                :visible.sync="editClassDialogVisible"
                width="50%"
        >
            <el-form
                    class="editform"
                    ref="ruleForm2"
                    :rules="rules4"
                    label-position="left"
                    label-width="80px"
                    :model="classForm"
            >
                <el-form-item label="班级名称" prop="name">
                    <el-input
                            v-model="classForm.name"
                            placeholder="请输入"
                    ></el-input>
                </el-form-item>
                <el-form-item label="班级人数" prop="number">
                    <el-input v-model="classForm.number" placeholder="请输入"></el-input>
                </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
        <el-button @click="editClassDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editClassDialog">确 定</el-button>
      </span>
        </el-dialog>
        <!-- 新增班级信息对话框 start -->

        <el-dialog
                title="新增班级"
                :visible.sync="addclassDialogVisible"
                width="50%"
                class="adddialog"
        >
            <el-form
                    class="editform"
                    ref="ruleForm"
                    :rules="rules4"
                    label-position="left"
                    label-width="80px"
                    :model="addClassData"
            >

                <el-form-item label="班级名字" prop="name">
                    <el-input v-model="addClassData.name" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="班级人数" prop="number">
                    <el-input v-model="addClassData.number" placeholder="请输入"></el-input>
                </el-form-item>

            </el-form>
            <span slot="footer" class="dialog-footer">
        <el-button size="mini" type="warning" @click="addClassNo">取 消</el-button>
        <el-button size="mini" type="primary" @click="addClassDialog"
        >确 定</el-button
        >
      </span>
        </el-dialog>
        <!--新增班级信息对话框 end-->
</el-container>
</template>

<script>
    import axios from "../../utils/axios";
    import md5 from "js-md5";
    import { getDepts, roleList,getDeptsList } from "../../utils/api";

    // import Treeselect from "@riophae/vue-treeselect";

    // import "@riophae/vue-treeselect/dist/vue-treeselect.css";

    export default {
        //  components: { Treeselect },
        methods: {
            //部门树
            deptsTree() {
                let parms ={}
                parms.deptName= this.deptName2;
                parms.isAll=true;
                getDepts(parms).then((res) => {
                    if (res.code == 200) {
                        this.depts = res.data;
                    }
                });
            },
            //部门查询
            deptsTree2() {
                let parms ={}
                parms.name= this.deptName2;
                parms.size=-1

                getDeptsList(parms).then((res) => {
                    if (res.code == 200) {
                        this.depts = res.data;
                    }
                });
            },
            //部门树点击
            handleNodeClick() {
                console.log(1);
            },
            //用户列表
            getUserList(con) {
                axios({
                    method: "GET",
                    url: "/sys/user",
                    params: con,
                }).then((res) => {
                    if (res.code == 200) {
                        this.tableData = res.data.records;
                        // this.parentList = res.data.filter((item) => item.pid == 0);
                        this.loading = false;
                        this.pageNum.current = res.data.current;
                        this.pageNum.size = res.data.size;
                        this.pageNum.total = res.data.total;
                    } else {
                        this.$message.error(res.message);
                    }
                });
            },

            //班级列表
            getClassList(con) {
                axios({
                    method: "GET",
                    url: "/class/queryClassPage/",
                    params: con,
                }).then((res) => {
                    if (res.code == 200) {
                        this.tableData2 = res.data.records;
                        // this.parentList = res.data.filter((item) => item.pid == 0);
                        this.loading = false;
                        this.pageNum.current = res.data.current;
                        this.pageNum.size = res.data.size;
                        this.pageNum.total = res.data.total;
                    } else {
                        this.$message.error(res.message);
                    }
                });
            },


            //页码
            handleSizeChange(val) {
                this.pageNum.size = val;
                if (this.searchToggle) {
                    this.searchData.current = this.pageNum.current;
                    this.searchData.size = this.pageNum.size;
                    this.getClassList(this.searchData);
                } else {
                    this.getClassList();
                }
            },
            handleCurrentChange(val) {
                this.pageNum.current = val;
                if (this.searchToggle) {
                    this.searchData.current = this.pageNum.current;
                    this.searchData.size = this.pageNum.size;
                    this.getClassList(this.searchData);
                } else {
                    this.getClassList();
                }
            },
            //添加
            adduser() {
                this.adduserDialogVisible = true;
                roleList({ size: -1 }).then((res) => {
                    console.log(res);
                    this.roles = res.data.records;
                });
                this.searchrestBtn();
            },
            //添加班级信息
            addclass(){
                this.addclassDialogVisible =true;
                this.searchrestBtn();
            },
            addNo() {
                this.adduserDialogVisible = false;
                this.$refs.ruleForm.resetFields();
            },
            addClassNo() {
                this.addclassDialogVisible = false;
                this.$refs.ruleForm.resetFields();
            },
            adduserDialog() {
                let obj = Object.assign({}, this.addData)
                obj.password = md5(obj.password);
                this.$refs.ruleForm.validate((valid) => {
                    if (valid) {
                        axios({
                            method: "POST",
                            url: "/sys/user",
                            data: obj,
                        }).then((res) => {
                            if (res.code == 200) {
                                this.$message.success("添加成功");
                                this.adduserDialogVisible = false;
                                this.getUserList(this.pageNum);
                                this.$refs.ruleForm.resetFields();
                            } else {
                                this.$message.error(res.message);
                            }
                        });
                    } else {
                        this.$message.error("内容不完整");
                    }
                });
            },

            addClassDialog() {
                let obj = Object.assign({}, this.addClassData)
                this.$refs.ruleForm.validate((valid) => {
                    if (valid) {
                        axios({
                            method: "POST",
                            url: "/class/saveClassOne/",
                            data: obj,
                        }).then((res) => {
                            if (res.code == 200) {
                                this.$message.success("添加成功");
                                this.addclassDialogVisible = false;
                                this.$refs.ruleForm.resetFields();
                            } else {
                                this.$message.error(res.message);
                            }
                        });
                    } else {
                        this.$message.error("内容不完整");
                    }
                });
            },

            //查询
            searchBtn(con) {
                this.getUserList(con);
                this.searchToggle = true;
            },
            //根据班级名字查询
            searchClassBtn(con) {
                this.getClassList(con);
                this.searchToggle = true;
            },
            //导出
            download() {
                axios({
                    method: "GET",
                    url: "/class/downExcl",
                    params: { size: -1 },
                }).then(() => {
                    // if (res.code == 200) {
                        alert("导出Excel");
                        // this.tableData1 = res.data.records;
                    // } else {
                    //     this.$message.error(res.message);
                    // }
                });
            },
            //重置
            searchrestBtn() {
                this.searchData2.name = "";
                this.getUserList();
                this.searchToggle = false;
            },
            restClassBtn() {
                this.searchClassData.name ="";
                this.getUserList();
                this.searchToggle = false;
            },
            //删除
            handleDelete(con) {
                this.deluserDialogVisible = true;

                this.delDate = [];
                this.delDate.push(con);
            },

            //删除班级信息
            handleDeleteClass(con) {
                this.delClassDialogVisible = true;

                this.delDate2 = [];
                this.delDate2.push(con);
            },
            deluserDialog() {
                axios({
                    method: "delete",
                    url: "/sys/user",

                    data: JSON.stringify(this.delDate),
                    headers: {
                        "Content-Type": "application/json;charset=UTF-8",
                    },
                }).then((res) => {
                    if (res.code == 200) {
                        this.$message.success("删除成功");
                        this.deluserDialogVisible = false;
                        this.getUserList(this.pageNum);
                    } else {
                        this.$message.error(res.message);
                    }
                });
            },
            delClassDialog() {
                axios({
                    method: "delete",
                    url: "/class/delClass",
                    data: JSON.stringify(this.delDate2),
                    headers: {
                        "Content-Type": "application/json;charset=UTF-8",
                    },
                }).then((res) => {
                    if (res.code == 200) {
                        this.$message.success("删除成功");
                        this.delClassDialogVisible = false;
                        this.getClassList(this.pageNum);
                    } else {
                        this.$message.error(res.message);
                    }
                });
            },
            deluserhandleClose(done) {
                this.$confirm("确认关闭？")
                    .then(() => {
                        done();
                    })
                    .catch(() => {});
            },
            //角色查询
            getRoleList() {
                axios({
                    method: "GET",
                    url: "/sys/role",
                    params: { size: -1 },
                }).then((res) => {
                    if (res.code == 200) {
                        this.tableData1 = res.data.records;
                    } else {
                        this.$message.error(res.message);
                    }
                });
            },
            //修改
            handleEdit(con) {
                this.edituserDialogVisible = true;
                this.usersForm.userName = con.userName;
                this.usersForm.loginName = con.loginName;
                this.usersForm.password = con.password;
                this.usersForm.phone = con.phone;
                this.usersForm.email = con.email;
                this.usersForm.id = con.id;
                this.editDate1.userId = con.id;
            },
            //修改班级信息
            handleClassEdit(con) {
                this.editClassDialogVisible = true;
                this.classForm.name = con.name;
                this.classForm.number = con.number;
                this.classForm.id= con.id;
                // this.edieditClassIdtDate1.id = con.id;
            },
            edituserDialog() {
                this.$refs.ruleForm2.validate((valid) => {
                    if (valid) {
                        axios({
                            method: "PUT",
                            url: "/sys/user",
                            data: this.usersForm,
                        }).then((res) => {
                            if (res.code == 200) {
                                this.$message.success("修改成功");
                                this.edituserDialogVisible = false;
                                this.getUserList(this.pageNum);
                            } else {
                                console.log(res);
                                this.$message.error(res.message);
                            }
                        });
                    } else {
                        this.$message.error("内容不完整");
                    }
                });
            },

            editClassDialog() {
                this.$refs.ruleForm2.validate((valid) => {
                    if (valid) {
                        axios({
                            method: "PUT",
                            url: "/class/updateClass/",
                            data: this.classForm,
                        }).then((res) => {
                            if (res.code == 200) {
                                this.$message.success("修改成功");
                                this.editClassDialogVisible = false;
                                this.getClassList(this.pageNum);
                            } else {
                                console.log(res);
                                this.$message.error(res.message);
                            }
                        });
                    } else {
                        this.$message.error("内容不完整");
                    }
                });
            },
            //重置用户角色关联
            restUserRoles() {
                let data = {}
                data.roleIds=this.editDate1.roleIds
                data.userId=this.editDate1.userId
                axios({
                    method: "POST",
                    url: "/sys/role/reset",
                    data: data,
                }).then((res) => {
                    if (res.code == 200) {
                        this.$message.success("角色重置成功");

                    } else {
                        this.$message.error(res.message);
                    }
                });
            },
            edituserhandleClose(done) {
                this.$confirm("确认关闭？")
                    .then(() => {
                        done();
                    })
                    .catch(() => {});
            },
            //重置密码
            restPassword(con) {
                this.$confirm("此操作将重置密码, 是否继续?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                })
                    .then(() => {
                        let obj = {};
                        obj.id = con;
                        axios({
                            method: "GET",
                            url: "/sys/user/restPassword",
                            params: obj,
                        }).then((res) => {
                            if (res.code == 200) {
                                this.$message.success("重置成功");
                            } else {
                                this.$message.error(res.message);
                            }
                        });
                    })
                    .catch(() => {
                        this.$message({
                            type: "info",
                            message: "已取消删除",
                        });
                    });
            },
        },
        data() {
            return {
                pageNum: {
                    current: 1,
                    size: 10,
                    total: 0,
                },
                icons: "",
                adduserDialogVisible: false,
                addclassDialogVisible: false,
                deluserDialogVisible: false,
                delClassDialogVisible: false,
                edituserDialogVisible: false,
                editClassDialogVisible: false,
                innerVisible: false,
                searchToggle: true,
                loading: true,
                downloadLoading: false,
                delDate: [],
                delDate2: [],
                searchData: {
                    userName: "",
                },
                searchData2: {
                    name: "",
                },
                searchClassData: {
                    name: "",
                },
                usersForm: {
                    email: "",
                    loginName: "",
                    password: "",
                    phone: "",
                    photo: "",
                    status: 0,
                    userName: "",
                },
                classForm: {
                    name: "",
                    number: "",
                },
                tableData: [],
                tableData2: [],
                tableData1: [],
                depts: [],


                roles: [],

                deptName: {},
                deptName2: '',

                defaultProps: {
                    children: "children",
                    label: "name",
                },

                editDate1: {
                    roleIds: [],
                    userId: "",
                },
                editClassId: {
                    id: "",
                },
                // parentList: [],
                addData: {
                    deptList: [],
                    email: "",
                    loginName: "",
                    password: "",
                    phone: "",
                    photo: "",
                    roleList: [],
                    status: 1,
                    userName: "",
                },
                addClassData: {
                    name : "",
                    number :""
                },
                rules4:{
                    name: [{required: true,message :"必填", trigger:"blur"}],
                    number: [{required: true,message :"必填", trigger:"blur"}]
                },
                rules: {
                    loginName: [{ required: true, message: "必填", trigger: "blur" }],
                    password: [{ required: true, message: "必填", trigger: "blur" }],
                    userName: [{ required: true, message: "必填", trigger: "blur" }],
                    email: [{ message: "邮箱格式错误", trigger: ["blur", "change"], pattern: /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,5}$/ }],
                    phone: [
                        {
                            pattern: /^1[3|4|5|7|8][0-9]\d{8}$/,
                            message: "手机号格式错误",
                            trigger: ["blur", "change"],
                        },
                    ],
                    // authStr: [{ required: true, message: "必填", trigger: "blur" }],
                },
                rules3: {
                    roleIds: [{ required: true, message: "必填", trigger: "blur" }],

                    // authStr: [{ required: true, message: "必填", trigger: "blur" }],
                },
            };
        },
        filters: {
            ellipsis(value, len) {
                if (!value) return
                if (value.length > len) {
                    return value.slice(0, len) + '...'
                }
                return value
            }
        },
        created() {
            // this.getUserList();
            this.getClassList();
            // this.getRoleList();
            // this.deptsTree();

        },
    };
</script>

<style lang="less" scoped>
    .el-container {
        display: flex;
        justify-content: start;
        flex-direction: column;
        align-items: center;
    }
    .el-card {
        width: 100%;
    }
    .el-footer {
        align-self: start;
        margin-top: 1.5rem;
    }
    .c1 {
        display: flex;
        justify-content: start;
        margin-bottom: 1.5rem;
        width: 100%;
        .dBtn {
            margin-right: 1rem;
        }
    }
    .el-dialog {
        display: flex;
        justify-content: flex-start;
    }
    .btns {
        display: flex;
        justify-content: space-between;
    }
    .s1 {
        height: 0;
        margin-top: 2.5rem;
        display: flex;
        align-items: center;
    }

    .editform {
        display: flex;
        justify-content: start;
        flex-wrap: wrap;
        text-align: left;
        .el-input /deep/.el-input__inner {
            height: 3.05rem;
            font-size: 12px !important;
        }
    }
    .el-input /deep/.el-input__inner {
        height: 3.05rem;
        font-size: 12px !important;
    }
    .editform /deep/ .el-form-item {
        display: inline-block;
        margin-left: 1rem;

        width: 48%;
    }
    .el-input /deep/ .el-input__icon {
        height: 100%;
        width: 25px;
        text-align: center;
        transition: all 0.3s;
        line-height: 3.05rem;
    }
    .pageCon {
        display: flex;
        justify-content: start;
        align-items: center;
        margin-top: 1.3rem;
    }
    .el-table /deep/ {
        font-size: 12px;

    }
    .el-switch /deep/ .el-switch__label * {
        font-size: 12px;
    }
    .el-table /deep/ thead {
        font-size: 12.5px;
        color: #5d9965;
        font-weight: 700;
    }
    .depttree {
        margin-top: 20px;
        font-size: 14px;
    }
    .el-dialog /deep/ .el-dialog__header {
        padding: 20px 20px 10px;
        text-align: left !important;
    }
</style>